<template>
  <div class="home">
    <div class="banner wrap">
      <img src="@/assets/img/banner.f559b49d.png" alt="" />
    </div>

    <div class="content">
      <div class="wrap">
        <!-- 精品推荐 -->
        <div class="good">
          <Title title="精品推荐" :scrImg="jp" />
          <Item :data="goodCommend" />
        </div>
        <!-- 热门推荐 -->
        <div class="hot">
          <Title title="热门推荐" :scrImg="hot" />
          <Item :data="hotCommend" />
        </div>
      </div>
    </div>
    <!-- 积分兑换 -->
    <div class="rechange wrap">
      <Title title="积分攻略" :scrImg="score" />
      <ul class="jifen">
        <li :style="{ backgroundImage: `url(${jifenImg1})` }">
          <h3>签到得鸡腿</h3>
          <div>去签到</div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg2})` }">
          <h3>购课得鸡腿</h3>
          <div>去购课</div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg3})` }">
          <h3>推荐得鸡腿</h3>
          <div>去推荐</div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg4})` }">
          <h3>做任务得鸡腿</h3>
          <div>做任务</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Title from "@/components/index/Title";
import Item from "@/components/index/Item";
import { getCommend, getHot } from "@/request/api";
export default {
  data() {
    return {
      goodCommend: [],
      hotCommend: [],
      jifenImg1: require("@/assets/img/integral-01.9386d4bf.png"),
      jifenImg2: require("@/assets/img/integral-02.150d92a1.png"),
      jifenImg3: require("@/assets/img/integral-03.9870f3f1.png"),
      jifenImg4: require("@/assets/img/integral-04.afadcbdf.png"),
      jp: require("@/assets/img/jingpin.png"),
      hot: require("@/assets/img/hot.png"),
      score: require("@/assets/img/score.png"),
    };
  },
  components: { Title, Item },
  async created() {
    const res = await getCommend();
    this.goodCommend = res.data.data.records.filter((item, index) => index < 4);
    const res1 = await getHot();
    this.hotCommend = res1.data.data.records.filter((item, index) => index < 8);
    // console.log(this.goodCommend, this.hotCommend);
  },
};
</script>


<style lang="less" scoped>
.home {
  .banner {
    height: 476px;
    img {
      height: 446px;
    }
  }
  .content {
    background-color: #f5f5f5;
    padding-bottom: 56px;
  }
  .jifen {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    li {
      width: 285px;
      height: 168px;
      color: #fff;
      padding: 20px 10px;
      box-sizing: border-box;
      cursor: pointer;
      transition: background-size 0.4s linear;
      background-size: 100% 100%;
      &:hover {
        background-size: 105% 105%;
      }
      h3 {
        font-size: 24px;
        margin-bottom: 19px;
      }
      div {
        width: 96px;
        height: 27px;
        border: 1px solid #ffffff;
        text-align: center;
        line-height: 27px;
      }
    }
  }
}
</style>
